<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <nav class="navbar bg-white navbar-expand-lg py-4">
        <div class="container-lg">
            <div class="d-lg-none">
            </div>
            <a href="index.html" class="navbar-brand px-3">
                <img src="images/logo2.png" width="170px" alt="">
            </a>
            <button class="navbar-toggler shadow-none border-0 text-red" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                  </svg>
            </button>
            <div class="collapse navbar-collapse justify-content-evenly">
                <form action="" class="w-50">
                    <div class="input-group">
                        <input type="search" name="" id="" class="form-control rounded-0 border-red border-2">
                        <button class="btn btn-red rounded-0">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                          </svg></button>
                    </div>
                </form>
                <a class="btn btn-red rounded-1" href="index.html">返回首页</a>
                <div>
                    <a href="" class="text-decoration-none d-flex align-items-center mb-2">
                        <span class="badge rounded-pill bg-red text-white p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
                              </svg>
                        </span>
                        <span class="text-red  ps-2">个人中心</span>
                    </a>
                    <a href="" class="text-decoration-none d-flex align-items-center" id="reg" data-bs-toggle="offcanvas" data-bs-target="#register">
                        <span class="badge rounded-pill bg-red text-white p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
                                <path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                                <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                                <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                              </svg>
                        </span>
                        <span class="text-red  ps-2">注册</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 侧导航开始 -->
    <div class="offcanvas offcanvas-end bg-red text-white" tabindex="-1" id="nav">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title">一点通购物平台</h5>
            <button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form action="" class="mb-3">
                <div class="input-group input-group-lg">
                    <input type="search" name="" id="" class="form-control  border-2">
                    <button class="btn btn-light">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                      </svg></button>
                </div>
            </form>
            <button class="btn btn-red btn-lg mb-3">返回首页</button>
            <div class="mb-3">
                <a href="" class="text-decoration-none d-flex align-items-center mb-2">
                    <span class="badge rounded-pill bg-light text-red p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
                              </svg>
                        </span>
                    <span class="text-white  ps-2">个人中心</span>
                </a>
                <a href="" class="text-decoration-none d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#register">
                    <span class="badge rounded-pill bg-light text-red p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
                                <path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                                <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                                <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                              </svg>
                        </span>
                    <span class="text-white  ps-2">注册</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 侧导航结束 -->
    <!-- 注册页面侧导航开始 -->
    <div class="offcanvas-end offcanvas text-red" id="register" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">注册页面</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body ">
            <form action="">
                <div class="my-3">
                    <label for="username1" class="form-label">Username</label>
                    <input type="text" class="form-control border-2 border-red" name="" id="username1">
                    <div class="form-text" id="result1">用户名必须大于2位</div>
                </div>
                <div class="my-3">
                    <label for="email1" class="form-label">Email</label>
                    <input type="email" class="form-control border-2 border-red" name="" id="email1">
                    <div class="form-text" id="result2">密码必须包含数字和字符</div>
                </div>
                <div class="my-3">
                    <label for="pwd1" class="form-label">Password</label>
                    <input type="password" class="form-control border-2 border-red" name="" id="pwd1">
                    <div class="form-text" id="result3">请输入密码</div>
                </div>
                <div class="my-3">
                    <label for="pwd2" class="form-label">RePassword</label>
                    <input type="password" class="form-control border-2 border-red" name="" id="pwd2">
                    <div class="form-text" id="result4">再输入一遍密码</div>
                </div>

                <div class="my-3 text-center">
                    <button type="submit" class="btn btn-red w-100">提交</button>
                </div>
            </form>
        </div>
    </div>
    <!-- 注册页面侧导航结束 -->
    <!-- 红色长条开始 -->
    <div class="w-100 py-2 bg-red">
    </div>
    <!-- 红色长条结束 -->

    <!-- 左侧导航+轮播开始 -->
    <div class="container-lg g-0 my-3">
        <div class="bg-secondary row g-0">
            <!-- 右拉框 -->
            <div class="col-3">
                <ul id="leftnav" class="bg-red d-flex flex-column justify-content-between m-0 p-0 position-relative">
                    <!-- 左侧导航-手机开始 -->
                    <li class="d-flex align-items-center  py-2">
                        <div class="text-center w-50 h-100 text-white">
                            <svg t="1701907407208" class="icon" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path d="M694.9 64h-364c-76.1 0-138.1 63.1-138.1 140.8v614.5c0 77.6 61.9 140.7 138.1 140.7h363.9C771 960 833 896.9 833 819.3V204.8C833 127.1 771 64 694.9 64z m-325.3 61.9c0-6.6 5.4-12 12-12h262.5c6.6 0 12 5.4 12 12v4.5c0 6.6-5.4 12-12 12H381.6c-6.6 0-12-5.4-12-12v-4.5z m143.3 814.6c-17.7 0-32.1-14.4-32.1-32.1 0-17.7 14.4-32.1 32.1-32.1s32.1 14.4 32.1 32.1c0 17.8-14.3 32.1-32.1 32.1z m245.3-102.7c0 9.4-7.6 17-17 17H281.5c-9.4 0-17-7.6-17-17V185.4c0-9.4 7.6-17 17-17h459.6c9.4 0 17 7.6 17 17v652.4z" ></path></svg>

                            <!-- <img src="images/phone.png" style="width: 40px;" alt=""> -->
                        </div>
                        <div class="text-start w-50">
                            <a href="" class="title text-white fs-5 text-decoration-none">手 机</a>
                        </div>
                        <!-- 更多手机品牌开始 -->
                        <div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">苹果</a>
                                <a href="#">苹果iPhone XS Max</a>
                                <a href="#">苹果iPhone XS</a>
                                <a href="#">苹果iPhone X</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">小米</a>
                                <a href="#">小米手机6</a>
                                <a href="#">小米手机5</a>
                                <a href="#">红米Note 4</a>
                                <a href="">小米手机5S</a>
                                <a href="">小米MiX</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">华为</a>
                                <a href="#">华为 Mate9</a>
                                <a href="#">华为 P9</a>
                                <a href="#">华为 P10</a>
                                <a href="#">华为 P10 Plus</a>
                                <a href="#">华为 Mate8</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">荣耀</a>
                                <a href="#">荣耀8</a>
                                <a href="#">荣耀9</a>
                                <a href="#">荣耀V9</a>
                                <a href="#">荣耀8青春版</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">魅族</a>
                                <a href="#">魅族 Note3</a>
                                <a href="#">魅族 Note2</a>
                                <a href="#">魅族 Note5</a>
                                <a href="#">魅族 PRO6 Plus</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">三星</a>
                                <a href="#">三星 Galaxy S7 edge</a>
                                <a href="#">三星 Galaxy S8+</a>
                                <a href="#">三星 Galaxy S</a>
                                <a href="#">更多 ></a>
                            </div>

                            <div class="text-center">
                                <a href="#" class="text-red fs-5">更多手机品牌</a>
                            </div>
                        </div>

                        <!-- 更多手机品牌结束 -->

                    </li>
                    <!-- 左侧导航-手机结束 -->
                    <!-- 左侧导航-平板开始 -->
                    <li class="d-flex align-items-center  py-2">
                        <div class="text-center text-white w-50">
                            <svg t="1701905506766" class="icon" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path d="M902.144 190.464q43.008 1.024 64.512 24.064t21.504 60.928l0 41.984q0 36.864-0.512 88.576t-0.512 111.616-0.512 112.128-0.512 90.112l0 45.056q0 32.768-18.944 54.784t-46.592 22.016l-784.384 0q-32.768-1.024-57.344-24.064t-24.576-59.904l0-481.28q0-16.384 5.632-31.744t16.384-27.648 26.112-19.968 35.84-7.68l44.032 0 88.064 0 116.736 0 133.12 0 131.072 0q65.536 0 118.272 0.512t88.576 0.512l44.032 0zM857.088 286.72l-694.272 0 1.024 452.608 692.224-1.024zM924.672 477.184q-15.36 0-26.624 10.752t-11.264 26.112 11.264 26.112 26.624 10.752 26.624-10.752 11.264-26.112-11.264-26.112-26.624-10.752z"></path></svg>
                        </div>
                        <div class="text-start w-50">
                            <a href="" class="text-white fs-5 text-decoration-none">平 板</a>
                        </div>
                        <!-- 更多平板品牌开始 -->
                        <div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">苹果</a>
                                <a href="#">苹果iPad Pro</a>
                                <a href="#">苹果iPad mini5</a>
                                <a href="#">苹果iPad 2021</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">小米</a>
                                <a href="#">小米平板5</a>
                                <a href="#">小米平板5 PRO</a>
                                <a href="#">小米平板4</a>
                                <a href="">小米平板4 PRO</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">华为</a>
                                <a href="#">华为 MediaPad M2</a>
                                <a href="#">华为 S8-701u</a>
                                <a href="#">华为 T1-823L</a>
                                <a href="#">华为畅想平板2</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">荣耀</a>
                                <a href="#">荣耀S8-701W</a>
                                <a href="#">荣耀T1-821W</a>
                                <a href="#">荣耀平板2</a>
                                <a href="#">荣耀平板V6</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">联想</a>
                                <a href="#">联想 平板小新Pad</a>
                                <a href="#">联想 平板小新Pad PRO</a>
                                <a href="#">联想 平板M10 TB-X605</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">三星</a>
                                <a href="#">三星 Knct1</a>
                                <a href="#">三星 t210</a>
                                <a href="#">三星 tab t710</a>
                                <a href="#">更多 ></a>
                            </div>

                            <div class="text-center">
                                <a href="#" class="text-red fs-5">更多平板品牌</a>
                            </div>
                        </div>
                        <!-- 更多平板品牌结束 -->
                    </li>
                    <!-- 左侧导航-平板结束 -->
                    <!-- 左侧导航-电脑开始 -->
                    <li class="d-flex align-items-center  py-2">
                        <div class="text-center text-white w-50">
                            <svg t="1701905714320" class="icon" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path d="M878.05 105.93h-732.1c-22.87 0-42.17 7.86-58.13 23.82S64 164.29 64 185.98v488.14c0 22.87 7.86 42.17 23.82 58.13s35.26 23.82 58.13 23.82h283.98l-80.05 121.98v40.02h324.24v-40.02l-80.05-121.98h283.98c22.87 0 42.17-7.86 58.13-23.82S960 696.99 960 674.12V185.98c0-21.68-7.86-40.26-23.82-56.23-15.97-15.72-35.26-23.82-58.13-23.82z m0 488.14h-732.1V185.98h732.09v408.09z" ></path></svg>
                        </div>
                        <div class="text-start w-50">
                            <a href="" class="text-white fs-5 text-decoration-none">电 脑 </a>
                        </div>

                        <!-- 更多电脑品牌开始 -->
                        <div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">苹果</a>
                                <a href="#">苹果MacBook PRo</a>
                                <a href="#">苹果iMac</a>
                                <a href="#">苹果MacBook Air</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">联想</a>
                                <a href="#">ThinkPad R</a>
                                <a href="#">ThinkPad SL</a>
                                <a href="#">ThinkPad T</a>
                                <a href="#">联想小新</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">华为</a>
                                <a href="#">MateBook</a>
                                <a href="#">MateBook D</a>
                                <a href="#">MateBook E</a>
                                <a href="#">MateBook X</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">外星人</a>
                                <a href="#">M15 R6</a>
                                <a href="#">X17 R1</a>
                                <a href="#">X15 R1</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">小米</a>
                                <a href="#">红米Book14</a>
                                <a href="#">小米Pro</a>
                                <a href="#">小米Ruby</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">三星</a>
                                <a href="#">三星 950QCG</a>
                                <a href="#">三星 930QCG</a>
                                <a href="#">三星 300E5M</a>
                                <a href="#">更多 ></a>
                            </div>

                            <div class="text-center">
                                <a href="#" class="text-red fs-5">更多电脑品牌</a>
                            </div>
                        </div>
                        <!-- 更多电脑品牌结束 -->
                    </li>
                    <!-- 左侧导航-电脑结束 -->
                    <!-- 左侧导航-摄影摄像开始 -->
                    <li class="d-flex align-items-center  py-2">
                        <div class="text-center text-white w-50">
                            <svg t="1701906069428" class="icon" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path d="M512 288c-124.8 0-224 99.2-224 224s99.2 224 224 224 224-99.2 224-224-99.2-224-224-224z m0 400c-96 0-176-80-176-176s80-176 176-176 176 80 176 176-80 176-176 176zM768 371.2a1.6 1.6 0 1 0 102.4 0 1.6 1.6 0 1 0-102.4 0z" ></path><path d="M864 224h-96l-22.4-67.2c-6.4-16-25.6-28.8-41.6-28.8H320c-19.2 0-35.2 12.8-41.6 28.8L256 224h-96c-54.4 0-96 41.6-96 96v448c0 54.4 44.8 96 96 96h704c54.4 0 96-41.6 96-96V320c0-54.4-41.6-96-96-96z m48 544c0 25.6-22.4 48-48 48H160c-25.6 0-48-22.4-48-48V320c0-25.6 22.4-48 48-48h131.2l9.6-32 22.4-64h377.6l22.4 64 9.6 32H864c25.6 0 48 22.4 48 48v448z" ></path></svg>
                        </div>
                        <div class="text-start w-50">
                            <a href="" class="text-white fs-5 text-decoration-none">摄影摄像 </a>
                        </div>
                        <!-- 更多相机品牌开始 -->
                        <div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">索尼</a>
                                <a href="#">ZV-1 Vlog</a>
                                <a href="#">A5100</a>
                                <a href="#">A7M4</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">佳能</a>
                                <a href="#">EOS R6</a>
                                <a href="#">M50</a>
                                <a href="#">EOS 850D</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">富士山</a>
                                <a href="#">GFX 50S</a>
                                <a href="#">X-S10</a>
                                <a href="#">X-T4</a>
                                <a href="#">GFX 100S</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">松下</a>
                                <a href="#">G100K</a>
                                <a href="#">S5K</a>
                                <a href="#">LX10</a>
                                <a href="#">S5</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">徕卡</a>
                                <a href="#">徕卡Q2</a>
                                <a href="#">徕卡M11</a>
                                <a href="#">徕卡D-LUX7</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">尼康</a>
                                <a href="#">D7500</a>
                                <a href="#">D5300</a>
                                <a href="#">P310</a>
                                <a href="#">DF 50MM</a>
                                <a href="#">更多 ></a>
                            </div>

                            <div class="text-center">
                                <a href="#" class="text-red fs-5">更多相机品牌</a>
                            </div>
                        </div>
                        <!-- 更多相机品牌结束 -->
                    </li>
                    <!-- 左侧导航-摄影摄像结束 -->
                    <!-- 左侧导航-耳 机开始 -->
                    <li class="d-flex align-items-center  py-2">
                        <div class="text-center text-white w-50">
                            <svg t="1701906774382" class="icon" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="60"><path d="M896 554.666667h-85.333333V426.666667a298.666667 298.666667 0 1 0-597.333334 0v128H128A85.426667 85.426667 0 0 0 42.666667 640v170.666667a85.426667 85.426667 0 0 0 85.333333 85.333333h106.666667a21.333333 21.333333 0 0 0 21.333333-21.333333V426.666667c0-141.16 114.84-256 256-256s256 114.84 256 256v448a21.333333 21.333333 0 0 0 21.333333 21.333333h106.666667a85.426667 85.426667 0 0 0 85.333333-85.333333V640a85.426667 85.426667 0 0 0-85.333333-85.333333z" ></path></svg>
                            <!-- <img src="images/headset.png" style="width: 40px;" alt=""> -->
                        </div>
                        <div class="text-start w-50">
                            <a href="" class="text-white fs-5 text-decoration-none">耳 机 </a>
                        </div>
                        <!-- 更多耳机品牌开始 -->
                        <div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">苹果</a>
                                <a href="#">airpods</a>
                                <a href="#">airpods2</a>
                                <a href="#">airpods PRO</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">小米</a>
                                <a href="#">红米Buds3</a>
                                <a href="#">红米AirDots3</a>
                                <a href="#">小米Buds3</a>
                                <a href="">红米AirDots3 PRO</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">华为</a>
                                <a href="#">FreeBuds3</a>
                                <a href="#">FreeBuds4</a>
                                <a href="#">FreeBuds4i</a>
                                <a href="#">FreeBuds PRO</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">VIVO</a>
                                <a href="#">vivo TWS2</a>
                                <a href="#">vivo TWS2E</a>
                                <a href="#">vivo TWS Neo</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">OPPO</a>
                                <a href="#">OPPO Enco Free2</a>
                                <a href="#">OPPO Enco Air</a>
                                <a href="#">OPPO Enco X</a>
                                <a href="#">OPPO Enco W51</a>
                                <a href="#">更多 ></a>
                            </div>
                            <div class="d-flex justify-content-between py-3">
                                <a href="#">三星</a>
                                <a href="#">三星 Galaxy Buds PRO</a>
                                <a href="#">三星 Galaxy Buds2</a>
                                <a href="#">三星 Galaxy Buds Live</a>
                                <a href="#">更多 ></a>
                            </div>

                            <div class="text-center">
                                <a href="#" class="text-red fs-5">更多耳机品牌</a>
                            </div>
                        </div>
                        <!-- 更多耳机品牌结束 -->
                    </li>
                    <!-- 左侧导航-耳 机结束 -->
                </ul>
            </div>
            <!-- 图片滚动 -->
            <div class="col-9">
                <!-- 轮播开始 -->
                <div class=" carousel slide h-100" id="slide" data-bs-ride="carousel" data-bs-interval="3000">
                    <!-- 轮播计数器开始 -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#slide" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#slide" data-bs-slide-to="2"></button>
                        <button type="button" data-bs-target="#slide" data-bs-slide-to="3"></button>
                    </div>
                    <!-- 轮播计数器结束 -->
                    <!-- 轮播项目开始 -->
                    <div class="carousel-inner h-100">
                        <div class=" carousel-item h-100 active">
                            <!-- <img src="images/big4.png" class=" d-block w-100" alt=""> -->
                        </div>
                        <div class=" carousel-item h-100">
                            <!-- <img src="images/big3.png" class=" d-block w-100" alt=""> -->
                        </div>
                        <div class=" carousel-item h-100">
                            <!-- <img src="images/big2.png" class=" d-block w-100" alt=""> -->
                        </div>
                        <div class=" carousel-item h-100">
                            <!-- <img src="images/big1.png" class=" d-block w-100" alt=""> -->
                        </div>
                    </div>
                    <!-- 轮播项目结束 -->
                    <!-- 轮播控制器开始 -->
                    <a href="#slide" class="carousel-control-prev" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>

                    <a href="#slide" class="carousel-control-next" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                    <!-- 轮播控制器结束 -->

                    <!-- 轮播结束 -->
                </div>

            </div>

        </div>



    </div>
    <!-- 左侧导航+轮播结束 -->

    <!-- 商品列表选项卡开始 -->
    <!-- 标题开始 -->
    <div class="container-lg g-0 mt-5">
        <h5 class="text-red fw-bold mx-2">热门机型</h3>
    </div>
    <!-- 标题结束 -->
    <!-- 选项卡开始 -->
    <div class="container-lg g-0 shadow mt-3 productlist">
        <!-- 导航开始 -->
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item "><a href="#phone" data-bs-toggle="pill" class="nav-link active rounded-0 py-3 fs-5">手机</a></li>
            <li class="nav-item "><a href="#pad" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">平板</a></li>
            <li class="nav-item"><a href="#computer" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">电脑</a></li>
            <li class="nav-item "><a href="#camera" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">相机</a></li>
            <li class="nav-item "><a href="#headset" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">耳机</a></li>
        </ul>
        <!-- 导航结束 -->
        <!-- 导航面板开始 -->
        <div class="tab-content p-3">
            <div class="tab-pane fade show active my-3" id="phone" role="tabpanel">
                <div class="row gy-4">
                    <div class="col-3 text-center">
                        <a href="detail.html"> <img src="images/phone/iphone1.jpg" alt=""></a>
                        <div class="my-2 text-muted"> iPhone X</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone2.jpg" alt=""></a>
                        <div class="my-2 text-muted"> iPhone 8 plus</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone3.jpg" alt=""></a>
                        <div class="my-2 text-muted"> iPhone 7</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone4.jpg" alt=""></a>
                        <div class="my-2 text-muted"> XiaoMi MAX3</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone5.jpg" alt=""></a>
                        <div class="my-2 text-muted"> honor-8X</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone6.jpg" alt=""></a>
                        <div class="my-2 text-muted"> honor-10</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone7.jpg" alt=""></a>
                        <div class="my-2 text-muted"> Galaxy Note8</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/phone/iphone8.png" alt=""></a>
                        <div class="my-2 text-muted"> nova 3i</div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade  my-3" id="pad" role="tabpanel">
                <div class="row gy-4">
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad1.png" alt=""></a>
                        <div class="my-2 text-muted"> Galaxy Tab A</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad2.png" alt=""></a>
                        <div class="my-2 text-muted">Galaxy Tab S3</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad3.png" alt=""></a>
                        <div class="my-2 text-muted"> Galaxy Tab S4</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad4.jpg" alt=""></a>
                        <div class="my-2 text-muted"> honor-2</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad5.png" alt=""></a>
                        <div class="my-2 text-muted"> huawei M5</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad6.jpg" alt=""></a>
                        <div class="my-2 text-muted"> huawei M3</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad7.jpg" alt=""></a>
                        <div class="my-2 text-muted"> iPad 9.7</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/pad/pad8.jpg" alt=""></a>
                        <div class="my-2 text-muted"> iPad pro</div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade  my-3" id="computer" role="tabpanel">
                <div class="row gy-4">
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer1.jpg" alt=""></a>
                        <div class="my-2 text-muted"> d-7000</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer2.jpg" alt=""></a>
                        <div class="my-2 text-muted"> d-G3-15.6</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer3.jpg" alt=""></a>
                        <div class="my-2 text-muted"> h-Pro454UF</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer4.jpg" alt=""></a>
                        <div class="my-2 text-muted"> h-S2</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer5.png" alt=""></a>
                        <div class="my-2 text-muted"> hp-15</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer6.png" alt=""></a>
                        <div class="my-2 text-muted"> hp-ENVY</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer7.jpg" alt=""></a>
                        <div class="my-2 text-muted"> lx-Air</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/computer/computer8.png" alt=""></a>
                        <div class="my-2 text-muted"> Macbook Air</div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade  my-3" id="camera" role="tabpanel">
                <div class="row gy-4">
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera1.jpg" alt=""></a>
                        <div class="my-2 text-muted"> b-K-70</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera2.png" alt=""></a>
                        <div class="my-2 text-muted"> n-Z6</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera3.png" alt=""></a>
                        <div class="my-2 text-muted"> j-EOS M6</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera4.png" alt=""></a>
                        <div class="my-2 text-muted"> n-COOLPIX</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera5.png" alt=""></a>
                        <div class="my-2 text-muted"> n-D750</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera6.png" alt=""></a>
                        <div class="my-2 text-muted"> n-F6</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera7.png" alt=""></a>
                        <div class="my-2 text-muted"> n-ILCE-7</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/camera/camera8.png" alt=""></a>
                        <div class="my-2 text-muted"> s-HDR-CX680</div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade  my-3" id="headset" role="tabpanel">
                <div class="row gy-4">
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset1.jpg" alt=""></a>
                        <div class="my-2 text-muted"> t- CK350M</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset2.png" alt=""></a>
                        <div class="my-2 text-muted"> Beats EP</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset3.png" alt=""></a>
                        <div class="my-2 text-muted"> Beats Solo3</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset4.png" alt=""></a>
                        <div class="my-2 text-muted"> Bose SoundLink</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset5.png" alt=""></a>
                        <div class="my-2 text-muted"> Bose SoundSport</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset6.png" alt=""></a>
                        <div class="my-2 text-muted"> s-HD4.50</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset7.png" alt=""></a>
                        <div class="my-2 text-muted"> s-IE-800</div>
                    </div>
                    <div class="col-3 text-center">
                        <a href=""> <img src="images/headset/headset8.jpg" alt=""></a>
                        <div class="my-2 text-muted"> t-EM7x</div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 导航面板结束 -->
    </div>
    <!-- 选项卡结束 -->
    <!-- 商品列表选项卡结束 -->

    <!-- 底部开始 -->
    <div class="container-lg my-5">
        <div class="row  d-none d-md-flex">
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#time"/>
                    </svg>
                </div>
                <div class="w-50">
                    <h5 class="text-dark-emphasis">准时快捷</h5>
                    <p class="small text-muted">验货回收 快速方便</p>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#safe"/>
                    </svg>
                </div>
                <div class="w-50">
                    <h5 class=" text-dark-emphasis"> 安全保障</h5>
                    <p class="small text-muted "> 放心购买 全权保障</p>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#environment"/>
                    </svg>

                </div>
                <div class="w-50">
                    <h5 class="text-dark-emphasis"> 环保处理</h5>
                    <p class="small text-muted "> 综合利用 拒绝污染</p>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#service"/>
                    </svg>
                </div>
                <div class="w-50 ">
                    <h5 class="text-dark-emphasis "> 售后无忧</h5>
                    <p class="small text-muted">7天内无理由退货</p>
                </div>
            </div>
        </div>

        <div class="row d-md-none text-center">
            <div class="col">
                <svg class="w-100 text-red">
                    <use xlink:href="images/icon.svg#time"/>
                </svg>
                <h6 class="text-dark-emphasis">准时快捷</h6>
            </div>
            <div class="col  text-red">
                <svg class="w-100">
                    <use xlink:href="images/icon.svg#safe"/>                    
                </svg>
                <h6 class=" text-dark-emphasis"> 安全保障</h6>
            </div>
            <div class="col  text-red">
                <svg class="w-100">
                    <use xlink:href="images/icon.svg#environment"/>
                </svg>
                <h6 class="text-dark-emphasis"> 环保处理</h6>
            </div>
            <div class="col  text-red">
                <svg class="w-100">
                    <use xlink:href="images/icon.svg#service"/>
                </svg>
                <h6 class="text-dark-emphasis "> 售后无忧</h6>
            </div>
        </div>
        <div class="my-5 text-center small text-muted ">
            Copyright &copy; 2021-2025 ZJFF 版权所有
        </div>
    </div>
    <!-- 底部结束 -->
    <script src="js/popper.min.js "></script>
    <script src="js/bootstrap.js "></script>
    <script>
        var reg = document.getElementById("reg");
    </script>
</body>

</html>